package myJs.cps.project

import myJs.api.Api
import myJs.cps.Style
import myJs.myPkg.reactBootstrap.{OverlayTrigger, Popover}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.ReactElement
import slinky.web.html._
import typings.csstype.csstypeStrings

import scala.scalajs.js

/**
 * Created by yz on 21/1/2022
 */
@react object FeaturePlotCp {

  case class Props(geneName: String, kindV: String)

  val component = FunctionalComponent[Props] { props =>

    val dir = props.kindV match {
      case "All" => "Landscape"
      case "Viral Hepatitis" => "Viral_Hepatitis"
      case x => x
    }
    val fileNameSuffix= dir match {
      case "Viral_Hepatitis" =>"Viral Hepatitis"
      case x=>x
    }

    val popover: ReactElement = Popover(id = "popover-basic")(
      Popover.Title("Note"),
      Popover.Content(
        "UMAP plot of cell clusters colored by gene expression"
      )
    )

    div(
      h5(style := Style(marginBottom = 10, fontSize = 16), "UMAP Plot ",
        OverlayTrigger(
          placement = "right",
          trigger = js.Array("focus", "hover"),
          overlay = popover
        )(
          span(
            a(`type` := "button",
              i(className := "fas fa-info-circle")
            )
          )
        ),
      ),
      div(style := Style(display = csstypeStrings.flex, justifyContent = csstypeStrings.`flex-end`),
        div(style := Style(marginLeft = 5), className := "btn-group",
          a(title := "Export image", className := "btn  btn-default idsButton", data - "toggle" := "dropdown",
            data - "hover" := "dropdown", data - "close-others" := "true", aria - "expanded" := "false",
            i(className := "fa fa-bars")
          ),
          ul(className := "dropdown-menu pull-right",
            li(
              a(href := s"${Api.featurePlotDownload}/${dir}/${props.geneName}_${fileNameSuffix}.png", "Download PNG image")
            ),
          )
        )
      ),
      img(style := Style(marginLeft = 0, width = "80%"), className := "interAnnoImg",
        src := s"${Api.featurePlot}/${dir}/${props.geneName}_${fileNameSuffix}.png"),
    )


  }

}
